<template>
  <!-- 限时秒杀-->
  <div class="ltk-container container">
    <VmGoodsText 
    :title="['限时秒杀']"
    :moreHref="{
        name: '限时秒杀',
        hrefUrl: 'https://www.vmall.com/portal/seckill/index.html?pageId=307001660'
    }"/>
    <ul>
        <VmGoodsCard width="230px" height="306px" backgroundColor="#ffd6d6" class="margin_right_10px">
            <template #fullyCustom>
                <img src="@/assets/images/clock.png" 
                :style="fullyCustomImgStyle"/>
                <p class="sessions">每日00:00场开抢</p>
            </template>
        </VmGoodsCard>
        <a v-for="item in goodsData" :key="item.title"
        href="https://www.vmall.com/portal/seckill/index.html?pageId=307001660">
            <VmGoodsCard
            class="margin_right_10px goods__card-hover"
            width='230px' height='306px'
            :imgInfo="{
                imgSrc: item.imgUrl,
                width: '142px',
                height: '142px'
            }"
            :goodsInfo="{
                title: item.title,
                desc: item.desc,
                price: item.price,
                oldPrice: item.oldPrice
            }"
            />
        </a>
    </ul>
    
  </div>
</template>

<script>
import { ref } from 'vue'
import VmGoodsText from '@/components/vm-goods-part/vm-goods-text'
import VmGoodsCard from '@/components/vm-goods-part/vm-goods-card'
import { getLtk } from '@/api/home'

export default {
  name: 'LimitedTimeKillPart',
  components: {
    VmGoodsText,
    VmGoodsCard
  },
  setup () {
    const fullyCustomImgStyle = {
        objectFit: 'contain',
        width: '88px',
        height: '88px',
        marginTop: '55px',
        marginBottom: '20px',
    }

    const goodsData = ref([])
    getLtk().then(data => {
        goodsData.value = data.data
    })

    return { fullyCustomImgStyle, goodsData }

  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/goods-card.scss';

.ltk-container {
    position: relative;
    top: -480px;
    ul {
        display: flex;
        flex-direction: row;
        .sessions {
            margin-bottom: 35px;
            line-height: 26px;
            color: rgb(207, 10, 44);
            font-size: 20px;
            font-weight: 400;
        }
    }
    
}
</style>
